<!-- #layout name=blank --sideType='market'-->
<style>
    .avatar {
        width: 48px;
        height: 48px;
        background: #eee;
        border-radius: 50%;
        line-height: 48px;
        color: #aaa;
        text-align: center;
        font-weight: bold;
        font-size: 14px;
        margin-right: 10px;
    }
    
    .avatar.blue {
        background: #009ad7;
        color: white;
    }
    .color-gray {
        color: #999;
    
    }

    .media-heading {
        margin: 6px 0px;
        word-break: break-all;
    }
</style>
<div class="page-header">
    <h1 class="title">Order</h1>
</div>
<div data-bind="component: { name: 'kb-breadcrumb', params: breadcrumb() }"></div>

<div class="row">
    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title" data-bind="text: serviceName"></h3>
            </div>
            <div class="panel-body">
                <div data-bind="html: remark" class="margin-bottom-20"></div>
                <div class="form-group" data-bind="visible: attachments().length">
                    <label>Attachments</label>
                    <p class="form-control-static" data-bind="foreach: attachments">
                        <a data-bind="attr: { href: $data.downloadUrl }" target="_blank">
                            <i class="fa fa-paperclip"></i>
                            <!-- ko text: $data.fileName -->
                            <!-- /ko -->
                        </a>
                    </p>
                </div>
                <hr>
                <div class="row">
                    <div class="col-md-2 col-sm-4 col-xs-6">
                        <div class="form-group">
                            <label>Created at</label>
                            <p class="form-control-static" data-bind="text: createdAt"></p>
                        </div>
                    </div>
                    <div class="col-md-2 col-sm-4 col-xs-6">
                        <div class="form-group">
                            <label>Price</label>
                            <p class="form-control-static" data-bind="text: price"></p>
                        </div>
                    </div>
                    <div class="col-md-2 col-sm-4 col-xs-6">
                        <div class="form-group">
                            <label>Paid</label>
                            <p class="form-control-static">
                                <label class="label label-sm" data-bind="css: { green: isPaid, gray: !isPaid }, text: Kooboo.text.common[isPaid?'yes':'no']"></label>
                            </p>
                        </div>
                    </div>
                    <div class="col-md-2 col-sm-4 col-xs-6">
                        <div class="form-group">
                            <label>Supplier</label>
                            <p class="form-control-static" data-bind="text: supplierName"></p>
                        </div>
                    </div>
                    <div class="col-md-2 col-sm-4 col-xs-6">
                        <div class="form-group">
                            <label>Buyer</label>
                            <p class="form-control-static" data-bind="text: buyerName"></p>
                        </div>
                    </div>
                    <!-- ko if: isClose -->
                    <div class="col-md-2 col-sm-4 col-xs-6">
                        <div class="form-group">
                            <label>Status</label>
                            <p class="form-control-static">
                                <label class="label label-sm green">Finished</label>
                            </p>
                        </div>
                    </div>
                    <!-- /ko -->
                    <!-- ko if: ImBuyer() && !isClose() -->
                    <div class="col-md-12 col-sm-12 col-xs-12">
                        <div class="form-group">
                            <label>&nbsp;</label>
                            <div>
                                <button class="btn green" data-bind="click: onComplete">Complete</button>
                            </div>
                        </div>
                    </div>
                    <!-- /ko -->
                </div>
            </div>
        </div>

        <reply-panel params="type: 'supplier', typeId: id, disabled: isClose"></reply-panel>
        <hr>
        <div data-bind="visible: messages().length" style="max-height: 500px;overflow-y: auto;">
            <ul class="media-list" data-bind="foreach: { data: messages, as: 'msg' }">
                <li class="media margin-bottom-10">
                    <a href="javascript:;" class="pull-left">
                        <div class="avatar pull-left" data-bind="text: $data.firstLetter, css: { 'blue': !isCurrentUser() }"></div>
                    </a>
                    <div class="media-body">
                        <!-- ko if: msg.content -->
                        <h5 class="media-heading" data-bind="html: msg.content"></h5>
                        <!-- /ko -->
                        <!-- ko if: msg.attachment() -->
                        <h5 class="media-heading">
                            <a data-bind="attr: { href: msg.attachment().url }" target="_blank">
                                <i class="fa fa-paperclip"></i>
                                <!-- ko text: msg.attachment().fileName -->
                                <!-- /ko -->
                            </a>
                        </h5>
                        <!-- /ko -->
                        <p class="clearfix">
                            <span class="pull-left color-gray">
                                <span data-bind="text: msg.userName"></span>
                                <span>send at</span>
                                <span data-bind="text: msg.date"></span>
                            </span>
                        </p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

<script>
    (function() {
        Kooboo.loadJS([
            "/_Admin/Scripts/components/kbBreadcrumb.js",
            "/_Admin/View/Market/Scripts/components/ReplyPanel.js",

        ])
    })()
</script>
<script src="/_Admin/View/Market/Scripts/Kooboo.Market.js"></script>
<script src="/_Admin/View/Market/Supplier/Order.js"></script>